<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>已加入的</title>
    <link rel="stylesheet" type="text/css" href="../style/api.css" />
    <link rel="stylesheet" type="text/css" href="../style/head.css" />
    <style>
        #closeIt {
            position: absolute;
            top: 35px;
            left: 1rem;
            width: 2rem;
            height: 2rem;
        }

        main {
            padding-top: 75px;
            border-top: 1px solid #ccc;
        }
        .findNothing {
            display: none;
            color: #999;
            text-align: center;
            padding: 1rem;
        }
        .lectureBox .lectureItem {
            width: 95%;
            padding: 0.5rem 1rem;
            margin: 0.5rem auto;
            border-radius: 0.5rem;
            background-color: #fff;
        }

        .lectureItem-title {
            text-align: center;
            position: relative;
            padding: 0.5rem;
            border-bottom: 1px dashed #ccc;
        }

        .lectureItem-title img {
            position: absolute;
            top: 0.5rem;
            left: 0;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
        }

        .lectureItem-title span {
            font-weight: bold;
            font-size: 1.2rem;
        }

        .lectureItem-body {
            padding: 0.5rem;
            color: #999;
            border-bottom: 1px dashed #ccc;
        }
        .lectureItem-body p {
            width: 100%;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            margin-bottom: 0;
        }
        .lectureItem-bottom {
            padding: 0.5rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px dashed #ccc;
        }
        .lectureItem-bottom span:nth-child(1) {
            color: #3949AB;
            margin-right: 0.5rem;
        }
        .lectureItem-bottom span:nth-child(2) img{
            width: 2rem;
            height: 2rem;
            vertical-align: middle;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <header>
        已加入的
        <img src="../img/icons/back.png" alt="" onclick="api.closeWin()" id="closeIt">
    </header>
    <main>
        <div class="findNothing">-- 没有数据 --</div>
        <div class="lectureBox">

        </div>
    </main>
</body>
<script type="text/template" id="lecture">
  {{~it.items:value:index}}
  <div class="lectureItem animated bounceInLeft" data-id="{{=value.id}}">
      <div class="lectureItem-title">
          <img src="../img/icons/badges.png" alt="">
          <span>【讲座】{{=value.lecture_name}}</span>
      </div>
      <div class="lectureItem-body">
          <p>{{=value.lecture_txt}}</p>
      </div>
      <div class="lectureItem-bottom">
          <span>主讲人:</span>
          <span>
              <img src="../img/icons/teacher.png" alt="">
              {{=value.lecture_teacher}}
          </span>
      </div>
  </div>
  {{~}}
</script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/doT.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/rend.js"></script>
<script type="text/javascript">
    apiready = function() {
        getAdded();
    };

    function getAdded() {
        api.ajax({
            url: 'http://114.116.243.15/newbtb/appinfo/queryAdded.lecture',
            method: 'post',
            data: {
                body: {}
            }
        },function(ret, err){
            if (ret) {
                if(ret.btb_data.total > 0) {
                    $('.lectureBox').append(btbRender('lecture',ret.btb_data.records));
                }
                else {
                  setTimeout(function() {
                      $('.findNothing').show();
                  },1000)
                }
            }
        });
    }
</script>
</html>
